<template>
  <div>
    <t-button size="small" @click="OnClick" theme="warning">
      <template #icon>
        <AddIcon/>
      </template>
      创建新角色
    </t-button>

    <t-drawer v-model:visible="data.show" header="创建新角色" :closeOnOverlayClick="false"
              :on-confirm="handleConfirm" @close="handleClose" size="large" destroy-on-close confirmBtn="确认创建">
      <div>
        <t-space direction="vertical" style="width: 100%;">
          <t-input-adornment prepend="唯一标识符">
            <t-input v-model="data.formData.key" placeholder="必须是小写英文字母，不能有空格，比如：root" size="large"/>
          </t-input-adornment>
          <t-input-adornment prepend="角色的名称">
            <t-input v-model="data.formData.name" placeholder="该角色的名称，任意字符，比如：德玛 西亚" size="large"/>
          </t-input-adornment>
          <p>
            创建角色后，无法修改。
          </p>
        </t-space>
      </div>
    </t-drawer>
  </div>
</template>
<script lang="ts" setup>
import {AddIcon} from "tdesign-icons-vue-next";
import {reactive} from "vue";
import api from "../../../../api/api";
import {MessagePlugin} from "tdesign-vue-next";

const emits = defineEmits(['success'])
const data = reactive({
  show: false,
  formData: {
    key: "",
    name: ""
  }
})

const OnClick = async () => {
  data.show = true
  data.formData.key = ""
  data.formData.name = ""
}

const handleClose = () => {
  data.show = false
}

const handleConfirm = async () => {
  let res = await api.Root.Role.CreateRole({
    key: data.formData.key,
    name: data.formData.name,
  })
  if (res != null) {
    data.show = false
    await MessagePlugin.success('创建成功')
    emits("success")
  }
}
</script>